<template>
  <div class="upCopperCont">
    <div
      :class="index % 3 == 0 ? 'noLeft formVal headImg' : 'formVal headImg'"
      :key="index"
      v-for="(item, index) in imgArr"
    >
      <img :src="item.img" />
      <div @click="delImgFn(index)" class="delIcon iconfont icon-shanchu"></div>
    </div>
    <div
      :class="
        imgArr.length % 3 == 0 ? 'noLeft formVal headImg' : 'formVal headImg'
      "
    >
      <div class="upImg iconfont icon-shangchuan"></div>
      <input ref="file" type="file" @change="onFileChange($event)" />
    </div>
    <el-dialog
      @opened="onDialogOpened"
      @close="cancelFn"
      :show-close="false"
      width="600px"
      :append-to-body="true"
      title="图片裁剪"
      v-model="dialogVisible"
    >
      <div class="preview-image-wrap">
        <img
          ref="preview-image"
          class="preview-image"
          :src="previewImage"
          alt=""
        />
      </div>
      <div class="ImgCtrlBtn">
        <el-button class="canceBtn" @click="cancelFn">取消</el-button>
        <btn value="确认" @click="onUpdatePhoto"></btn>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import $ from "jquery";
import "cropperjs/dist/cropper.css";
import Cropper from "cropperjs";
import btn from "@/components/public/btn.vue";

export default {
  components: { btn },
  data() {
    return {
      previewImage: "",
      dialogVisible: false,
      headImg: "",
      imgArr: this.propImg,
      upImgLoad: false,
    };
  },
  props: {
    propImg: Array,
  },
  methods: {
    delImgFn(index) {
      this.imgArr.splice(index, 1);
      this.$emit("successCropper", this.imgArr);
    },
    cancelFn() {
      this.dialogVisible = false;
      this.cropper.destroy();
      this.previewImage = "";
      this.$refs.file.value = "";
    },
    onFileChange(e) {
      let file = e.target.files[0];
      let blobData = window.URL.createObjectURL(file);
      this.previewImage = blobData;
      this.dialogVisible = true;
      // 解决选择相同图片不触发change事件的问题
      this.$refs.file.value = "";
    },

    onUpdatePhoto() {
      if (!this.upImgLoad) {
        this.cropper.getCroppedCanvas().toBlob((file) => {
          let formData = new FormData(); // 可以增加表单数据
          formData.append("file", file);
          this.upImgLoad = true;

          const loading = this.$loading({
            lock: true,
            text: "上传中,请耐心等待~",
            spinner: "el-icon-loading",
            background: "rgba(255, 255, 255, 0.7)",
          });
          $.ajax({
            url: this.$apis + "/common/Upload/UpImg",
            dataType: "json",
            type: "post",
            processData: false,
            contentType: false,
            data: formData,
            success: (res) => {
              if (res.code == 1) {
                this.imgArr.push({ img: res.data.src });
                this.$emit("successCropper", this.imgArr);
                this.previewImage = res.data.src;
                this.dialogVisible = false;
                this.cropper.destroy();
              } else {
                this.$message(res.msg);
              }
              this.upImgLoad = false;
              loading.close();
            },
            error: (res) => {
              loading.close();
              this.upImgLoad = false;
              this.$message("上传超时");
            },
          });
        });
      }
    },

    onDialogOpened() {
      let image = this.$refs["preview-image"];
      let cropper = new Cropper(image, {
        aspectRatio: 1 / 1, // 裁剪框比列  1/1 长与宽的比列  NaN:任意比列
        viewMode: 1, // 0:对裁剪框的移动没有限制  1:裁剪框不能超过图片//2:裁剪框不能超过图片且图片高度和阴影背景高度一样  3:让图片完全填充阴影背景
        dragMode: "none",
        zoomOnTouch: true, //是否可以通过触摸的形式来去放大图片(手机端)
        zoomable: true, //是否允许缩放图片
        autoCropArea: 0.8, //当初始化时，裁剪框的大小与原图的比例
        background: true, //是否显示网格背景
        center: true, //裁剪框是否在图片的中心
        cropBoxResizable: true, //是否可以调节裁剪框的大小
      });
      this.cropper = cropper;
    },
  },
  mounted() {},
  created() {},
};
</script>

<style scoped lang="less">
.upCopperCont {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .headImg {
    width: 120px;
    margin-right: 20px;
    cursor: pointer;
    height: 120px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px dashed #ddd;
    transition: all 0.2s linear;
    position: relative;
    margin-bottom: 20px;
    .delIcon {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 14px;
      color: #fff;
      width: 30px;
      height: 30px;
      background-color: black;
      text-align: center;
      line-height: 30px;
      border-radius: 0px 0px 0 15px;
    }
    input {
      width: 100%;
      height: 100%;
      cursor: pointer;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
    .upImg {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      text-align: center;
      line-height: 120px;
      font-size: 40px;
      // color: #dcdee0;
      color: #ccc;
    }
    img {
      width: 100%;
      border-radius: 5px;
    }
  }
  .noLeft {
    margin-left: 0;
  }
}
.headImg:hover {
  border: 1px dashed #4b58dc;
}
.headImg:hover .upImg {
  color: #4b58dc;
}
</style>
<style scoped lang="less">
.preview-image-wrap {
  width: 100%;
  background-color: #fff;
  height: 310px;
  .preview-image {
    display: block;
    max-width: 100%;
    // height: 300px;
  }
}
.el-dialog__body {
  padding: 10px 20px;
}
.imgTipLoad {
  margin: 15px 0;
  display: flex;
  justify-content: center;
}
.ImgCtrlBtn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  .elBtnItem {
  }
  .canceBtn {
    margin-right: 15px;
  }
}
</style>
